import QtQuick 2.0
import QtMultimedia 5.12

import "qrc:/"

Item {
    signal startClicked

    id: root
    anchors.fill: parent


    MediaPlayer {
        id: button_music
        source: "qrc:/music/game/distance_button.wav"
    }

    // 背景图
    Image {
        anchors.fill: parent
        id: item_image_background
        source: "qrc:/img/menuUI/background.jpg"
    }

    Grid {
        id :grid
        x:0.3*parent.width
        y:0.35*parent.height
        height: 0.3*parent.height
        width: 0.4*parent.width

        spacing: 5
        rows: 3
        columns: 1

        GameButton {
            id: startGame
            width: parent.width
            height:  0.3*parent.height
            source:  "qrc:/img/menuUI/start.png"
            text: qsTr("开始游戏")
            onClicked: {
                button_music.play()
                startClicked()
            }
        }

        GameButton {
            id: top
            width: parent.width
            height:  0.3*parent.height
            source:  "qrc:/img/menuUI/start.png"
            text: qsTr("排行榜")
            onClicked: {
                button_music.play()
                console.log("按下了排行榜按钮")
            }
        }

        GameButton {
            id: quit
            width: parent.width
            height:  0.3*parent.height
            source:  "qrc:/img/menuUI/start.png"
            text: qsTr("退出")
            onClicked: {
                button_music.play()
                Qt.quit()
            }
        }
    }

    // 排行榜
    Rectangle {
        anchors.fill: parent
        visible: true
        color:"#7F000000"
        Image {
            id: top_image
            anchors.centerIn:  parent
            width: parent.width/2
            height: parent.height/2
            source: "qrc:/img/topUI/top.png"
        }

        ListView {
            x: top_image.x + top_image.width*0.2
            y: top_image.y + top_image.height*0.3
            width: top_image.width*0.6
            height: top_image.height*0.58
            model: 10
            Rectangle{
                anchors.fill: parent
                color:"blue"
            }

            delegate: Rectangle{
                width: parent.width
                height: 20
                color:"transparent"
                Text {
                    anchors.centerIn: parent
                    font.pointSize: 14
                    text: index
                }
            }
        }
    }

}
